<template>
  <div class="group w100 h100 df fd-c">
    <h1>部门烟支数量</h1>
    <div class="w100 h100 df group-content">
      <div>
        <ul>
          <!-- <div :style="{background:item%2==0?'#fff':''}">{{item%2==0?'10,000':'周评吸'}}</div> -->

          <li>
            <div>周评吸</div>
          </li>
          <li>
            <div :style="{background:'#fff'}">{{dataNumber[0]}}</div>
          </li>
          <li>
            <div>日评吸</div>
          </li>
          <li>
            <div :style="{background:'#fff'}">{{dataNumber[1]}}</div>
          </li>
        </ul>
      </div> 
      <div ref="daymonthnum"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import http from "@/http/index";

const daymonthnum = ref();
onMounted(async () => {
  const res5 = await http.corsApi("/index/smokeGroupDayAndWeek", "get", {});
  console.log("res5", res5);
  dataNumber.value = [res5.data.day, res5.data.week];
  //   var chartDom = document.getElementById("main");
  var myChart = echarts.init(daymonthnum.value);
  var option;

  const data = [];
  for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
  }
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      max: "dataMax",
    },
    yAxis: {
      type: "category",
      data: ["日评吸", "周评吸"],
    },
    series: [ 
      {
        name: "烟支数量",
        type: "bar",
        data: [res5.data.day, res5.data.week],
        label: {
          show: true,
          position: "right",
          valueAnimation: true,
        },
      },
    ],
    legend: {
      show: true,
    },
  };

  option && myChart.setOption(option);
});

const dataNumber = ref([]);
</script>

<style scoped lang="scss">
.group {
  padding: 20px;
  box-sizing: border-box;
  h1 {
    font-size: 18px;
    font-weight: 600;
    color: #666666;
  }
  .group-content {
    > div:nth-child(1) {
      width: 30%;
      ul {
        li {
          margin-top: 15px;
          > div {
            width: 70%;
            background-color: #3f7fd2;
            border: 1px solid #ccc;
            border-radius: 15px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    > div:nth-child(2) {
      width: 70%;
    }
  }
}
</style>